<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>边框模拟等高---伪等高</title>
  <style>
    .wrap {
      position: relative;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      word-break: break-all;
      white-space: pre-wrap;
    }

    .right {

      border-left: 100px solid darkgray;
      background: lemonchiffon;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="left">
    这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px
    这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px
    这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px
    这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px 这是左边内容宽度为100px
    这是左边内容宽度为100px
  </div>
  <div class="right">
    因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上，实现视觉上的等高效果
    <br>
    [注意]左右两侧元素的内容高度不能大于中间元素内容高度，否则无法撑开容器高度
    <br>
    [注意]不适合于更多列的应用，比如说三列以上，这样的方法就行不通了
  </div>

</div>
</body>
</html>